import React from 'react'
import ReactEcharts from 'echarts-for-react'
import echarts from 'echarts'

const CalendarComponent = () => {
  const getVirtulData = (year) => {
    year = year || '2017'
    let date = +echarts.number.parseDate(`${year}-01-01`)
    let end = +echarts.number.parseDate(`${+year + 1}-01-01`)
    let dayTime = 3600 * 24 * 1000
    let data = []
    for (let time = date; time < end; time += dayTime) {
      data.push([
        echarts.format.formatTime('yyyy-MM-dd', time),
        Math.floor(Math.random() * 1000),
      ])
    }
    return data
  }

  let graphData = [[
    1485878400000,
    260,
  ], [
    1486137600000,
    200,
  ], [
    1486569600000,
    279,
  ], [
    1486915200000,
    847,
  ], [
    1487347200000,
    241,
  ], [
    1487779200000,
    411,
  ], [
    1488124800000,
    985,
  ],
  ]

  let links = graphData.map((item, idx) => {
    return {
      source: idx,
      target: idx + 1,
    }
  })
  links.pop()

  const option = {
    tooltip: {
      position: 'top',
    },
    visualMap: [{
      min: 0,
      max: 1000,
      calculable: true,
      seriesIndex: [2, 3, 4],
      orient: 'horizontal',
      left: '55%',
      bottom: 20,
    }, {
      min: 0,
      max: 1000,
      inRange: {
        color: ['grey'],
        opacity: [0, 0.3],
      },
      controller: {
        inRange: {
          opacity: [0.3, 0.6],
        },
        outOfRange: {
          color: '#ccc',
        },
      },
      calculable: true,
      seriesIndex: [1],
      orient: 'horizontal',
      left: '10%',
      bottom: 20,
    }],

    calendar: [
      {
        orient: 'vertical',
        yearLabel: {
          margin: 40,
        },
        monthLabel: {
          nameMap: 'cn',
          margin: 20,
        },
        dayLabel: {
          firstDay: 1,
          nameMap: 'cn',
        },
        cellSize: 40,
        range: '2017-02',
      },
      {
        orient: 'vertical',
        yearLabel: {
          margin: 40,
        },
        monthLabel: {
          margin: 20,
        },
        cellSize: 40,
        left: 460,
        range: '2017-01',
      },
      {
        orient: 'vertical',
        yearLabel: {
          margin: 40,
        },
        monthLabel: {
          margin: 20,
        },
        cellSize: 40,
        top: 350,
        range: '2017-03',
      },
      {
        orient: 'vertical',
        yearLabel: {
          margin: 40,
        },
        dayLabel: {
          firstDay: 1,
          nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        },
        monthLabel: {
          nameMap: 'cn',
          margin: 20,
        },
        cellSize: 40,
        top: 350,
        left: 460,
        range: '2017-04',
      }],

    series: [{
      type: 'graph',
      edgeSymbol: ['none', 'arrow'],
      coordinateSystem: 'calendar',
      links,
      symbolSize: 10,
      calendarIndex: 0,
      data: graphData,
    }, {
      type: 'heatmap',
      coordinateSystem: 'calendar',
      data: getVirtulData(2017),
    }, {
      type: 'effectScatter',
      coordinateSystem: 'calendar',
      calendarIndex: 1,
      symbolSize (val) {
        return val[1] / 40
      },
      data: getVirtulData(2017),
    }, {
      type: 'scatter',
      coordinateSystem: 'calendar',
      calendarIndex: 2,
      symbolSize (val) {
        return val[1] / 60
      },
      data: getVirtulData(2017),
    }, {
      type: 'heatmap',
      coordinateSystem: 'calendar',
      calendarIndex: 3,
      data: getVirtulData(2017),
    }],
  }

  return (
    <div className="examples">
      <div className="parent">
        <label> render a calendar-charts </label>
        <ReactEcharts
          option={option}
          style={{ height: '700px', width: '100%' }}
          className="react_for_echarts"
        />
      </div>
    </div>
  )
}

export default CalendarComponent
